<template>
  <div class="app-container feedback-container minH">
    <div class="topline w100p bgwhite ptb20 radius10 pl10 pr20 justify-between">
      <el-input v-model="uid" style="width: 280px" placeholder="搜尋用戶訊息ID..." :prefix-icon="Search" class="search" />
      <div>
        <el-button class="btn2" @click="getfeedback()">查詢</el-button>
        <el-button class="btn1" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="mt15 radius10 hidden pb15 flex1 bgwhite  flex-col">
      <div class="flex1 w100p ">
        <el-table :data="tableData" style="width: 100%" cell-class-name="tbcell" header-cell-class-name="hdcell" :default-sort="{ prop: 'created_at', order: 'descending' }">
          <el-table-column prop="uid" label="用戶訊息" width="200" />
          <el-table-column prop="content" label="反饋内容" />
          <el-table-column prop="created_at" label="創建時間" width="180" sortable />
        </el-table>
      </div>

      <div class=" mlauto plr20">
        <el-pagination v-model:current-page="currentPage3" prev-text="上一頁" next-text="下一頁" :small="small" :disabled="disabled" :background="true" layout="prev, pager, next, jumper" :total="total" :default-page-size="15" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { feedback } from '@/api/system'
const uid = ref('')
let total = ref(0)
let tableData = ref([])
onMounted(() => {
  getfeedback()
})
const getfeedback = () => {
  feedback({
    page: currentPage3.value,
    uid: uid.value
  }).then((res) => {
    console.log('获取帮助与反馈', res)
    tableData.value = res.data.data
    total.value = res.data.total

  })
}
const reset = () => {
  uid.value = ''
  getfeedback()
}
const tableRowClassName = () => {
  return 'tbrow'
}
const currentPage3 = ref(1)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  getfeedback()
}
</script>

<style lang="scss" scoped>
.feedback-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  overflow: hidden;
  border-radius: 10px !important;
  // padding: 5px 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
  border: none;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: none;
  border: none;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: none;
  border: none;
}
</style>